<template>
    <div>
        <div class="navbar">
            <a class="right">{{username}}</a>
        </div>
        <table>
            <tr>
                <th>ID</th>
                <th style="width: 500px">Title</th>
                <th>Date</th>
                <th></th>
            </tr>
            <tr v-for="blog in blogs" :key="blog.id" >
                <td>{{ blog.id }}</td>
                <td><router-link :to="{ name: 'BlogDetail', params: { id: blog.id } }">{{ blog.title }}</router-link></td>
                <td>{{ blog.createDate}}</td>
                <td><button @click="deletePost(blog.id)" class="btn" >取消收藏</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            username: "",
            blogs: [],
        };
    },
    mounted() {
        if(localStorage.getItem('user')===null){
            this.$router.replace({ path: "/login" });
        }

        this.getBlogData();

    },
    methods: {
        getBlogData() {
            axios.get('/api/bookmarks')
                .then(response => {
                    this.blogs = response.data;
                    console.log(this.blogs);
                    this.username = JSON.parse(localStorage.getItem('user')).username;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        deletePost(id) {
            const r = confirm("确定要取消收藏吗？");
            if (r == true) {
                axios.post(`/api/deleteBookmark/${id}`)
                    .then(response => {
                        console.log(response.data);
                        this.getBlogData();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            } else {
                return;
            }
        },
    },
};
</script>

<style>

.navbar {
    overflow: hidden;
    background-color:transparent;
}

.navbar a {
    font-weight: bolder;
    font-size: 25px;
    float: left;
    display: block;
    color:#fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a.right {
    float: right;
}


table {
    width: 100%;
    border-collapse:separate;
    border-spacing:4px;
}

table td {
    padding: 12px;
    text-align:left;
    border:0;
    border-bottom: 1px solid #fff;
    border-radius: 4px;
}

table th {
    padding: 12px;
    text-align: center;
    border:0;
    border-bottom: 1px solid #fff;
    border-radius: 4px;
    background:linear-gradient(90deg, #d1d2d4,#73f219,#000000);
    color-image:#fff;
    font-family: Papyrus;
}

table tbody tr:hover {
    background-color: #fff;
}
th:nth-child(1),
td:nth-child(1) {
    width: 8%;
}

th:nth-child(2),
td:nth-child(2) {
    width: 50%;
}

th:nth-child(3),
td:nth-child(3) {
    width: 20%;
}

th:nth-child(4),
td:nth-child(4) {
    width: 12%;
}
</style>




